//烧结仓位
<template>
    <div class="container">
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">6炉</mt-tab-item>
            <mt-tab-item id="2">7炉</mt-tab-item>
            <mt-tab-item id="3">8炉</mt-tab-item>
            <mt-tab-item id="4">5烧成品</mt-tab-item>
            <mt-tab-item id="5">6烧成品</mt-tab-item>
            <mt-tab-item id="6">5烧料</mt-tab-item>
            <mt-tab-item id="7">6烧料</mt-tab-item>
        </mt-navbar>
        <!--<mt-tab-container v-model="selected">-->
        <!--<mt-tab-container-item id="1">-->
        <div class="msg-container">
            <p>
                <i class="fa fa-volume-up" aria-hidden="true"></i>
                <span> {{msg_data}}</span>
            </p>
        </div>
        <div class="content">
            <div class="chart-position" id="chartPosition">

            </div>
            <div>
                <i class="fa fa-line-chart" aria-hidden="true"></i>
                <span>历史趋势</span>
                <div class="trend" id="trendOne">

                </div>

            </div>

        </div>
        <div class="replace">

        </div>

    </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    name: "materialSpace",
    watch: {
      selected: function () {


      }
    },
    data() {
      return {
        msg_data: '8高炉3烧结矿仓位料2.5m',
        selected: "1",
        chart_position_x_1: ['焦炭', '焦炭', '烧结矿', '烧结矿', '烧结矿', '烧结矿', '烧结矿', '烧结矿', '球块矿', '球块矿', '球块矿', '球块矿'],
        chart_position_data_1: [2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5],
        trend_1_x: ['9:30', '10:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00'],
        trend_1_data: [2, 3, 4, 5, 6, 7, 8, 2],
        title: '7炉烧炉2仓位'
      };
    },
    mounted() {
      this.$nextTick(() => {
        const myChart_chart_position_one = echarts.init(document.getElementById("chartPosition"));
        const myChart_trend_one = echarts.init(document.getElementById("trendOne"));

        const option_trend_one = {
          title: {
            text: this.title,
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: this.trend_1_x,
            axisLabel: {
              rotate: 60
            }

          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.trend_1_data,
            type: 'line',
            symbol: 'diamond'
          }]

        }
        const option_chart_position_one = {
          title: {
            text: '当前仓位',
            left: 'center'
          },
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.chart_position_x_1,
              axisLabel: {
                rotate: 60
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              data: this.chart_position_data_1
            }
          ]

        };

        myChart_chart_position_one.setOption(option_chart_position_one);
        myChart_trend_one.setOption(option_trend_one);


      })


    }
  };
</script>

<style lang="scss" scoped>
    .msg-container {
        width: 100%;
        height: 50px;
        border: 1px solid #888;
        box-sizing: border-box;
        overflow: auto;
        margin-top: 5px;
        & > p {
            height: 48px;
            line-height: 48px;
        }
    }

    .chart-position {
        width: 100%;
        height: 200px;
    }

    .trend {
        width: 100%;
        height: 200px;
    }

    .replace {
        height: 28px;
    }

</style>
